<template>
  <div class="version-info">
    <span class="version-text" @click="handleClick">v{{ version }}</span>
  </div>
</template>

<script>
export default {
  name: 'VersionInfo',
  data() {
    return {
      version: '1.0.2',
      clickCount: 0,
      clickTimer: null,
      animationTimer: null,
      isAnimating: false,
    }
  },
  methods: {
    handleClick() {
      this.clickCount++

      // 清除之前的定时器
      if (this.clickTimer) {
        clearTimeout(this.clickTimer)
      }

      // 3秒内点击3次触发彩蛋
      if (this.clickCount >= 3) {
        this.triggerEasterEgg()
        this.clickCount = 0
      } else {
        // 3秒后重置计数
        this.clickTimer = setTimeout(() => {
          this.clickCount = 0
        }, 3000)
      }
    },

    triggerEasterEgg() {
      // 触发全局事件，让App.vue中的彩蛋组件显示
      this.$emit('trigger-easter-egg')
    },

    startAnimationTimer() {
      // 每15秒执行一次动画
      this.animationTimer = setInterval(() => {
        this.playVersionAnimation()
      }, 15000)
    },

    playVersionAnimation() {
      if (this.isAnimating) return // 防止动画重叠

      this.isAnimating = true
      const versionText = this.$el.querySelector('.version-text')
      if (versionText) {
        // 执行3次呼吸动画
        this.breathAnimation(versionText, 3)
      }
    },

    breathAnimation(element, count) {
      if (count <= 0) {
        this.isAnimating = false
        return
      }

      // 添加呼吸动画类
      element.classList.add('version-breath')

      // 2秒后移除动画类并执行下一次
      setTimeout(() => {
        element.classList.remove('version-breath')
        // 短暂延迟后执行下一次呼吸
        setTimeout(() => {
          this.breathAnimation(element, count - 1)
        }, 200)
      }, 2000)
    },
  },
  mounted() {
    this.startAnimationTimer()
  },
  beforeUnmount() {
    if (this.animationTimer) {
      clearInterval(this.animationTimer)
    }
  },
}
</script>

<style scoped>
.version-info {
  position: fixed;
  bottom: 10px;
  left: 10px;
  z-index: 1000;
  pointer-events: auto;
}

.version-text {
  font-size: 12px;
  color: #666666;
  opacity: 0.8;
  font-family: 'Courier New', monospace;
  background: transparent;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.version-text:hover {
  opacity: 1;
  color: #888888;
}

/* 版本号呼吸动画效果 */
@keyframes version-breath {
  0% {
    opacity: 0.8;
    background: transparent;
    color: #666666;
    border-color: transparent;
  }
  50% {
    opacity: 1;
    background: rgba(173, 216, 230, 0.8);
    color: #1e3a8a;
    border-color: #1e3a8a;
  }
  100% {
    opacity: 0.8;
    background: transparent;
    color: #666666;
    border-color: transparent;
  }
}

.version-text.version-breath {
  animation: version-breath 2s ease-in-out;
}
</style>
